<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const githubId = ref('')
const email = ref('')

const handleSubmit = () => {
  // 这里可以添加表单验证逻辑
  if (githubId.value && email.value) {
    // 这里可以添加提交逻辑
    console.log('提交的数据:', {
      githubId: githubId.value,
      email: email.value
    })
    // 提交后跳转到面试流程页面
    router.push('/interview')
  }
}
</script>

<template>
  <div class="form-container">
    <div class="form-content">
      <h1 class="form-title">开始挑战</h1>
      <form @submit.prevent="handleSubmit" class="form">
        <div class="form-group">
          <label for="githubId">GitHub ID</label>
          <input
            type="text"
            id="githubId"
            v-model="githubId"
            placeholder="请输入你的 GitHub ID"
            required
          />
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input
            type="email"
            id="email"
            v-model="email"
            placeholder="请输入你的邮箱"
            required
          />
        </div>
        <button type="submit" class="submit-button">接受挑战</button>
      </form>
    </div>
  </div>
</template>

<style scoped>
.form-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.form-content {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.form-title {
  color: #2c3e50;
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label {
  color: #2c3e50;
  font-size: 1rem;
  font-weight: 500;
}

input {
  padding: 0.8rem;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

input:focus {
  outline: none;
  border-color: #409eff;
}

.submit-button {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 0.8rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 1rem;
}

.submit-button:hover {
  background-color: #66b1ff;
}

@media screen and (max-width: 480px) {
  .form-container {
    padding: 1rem;
  }
  
  .form-content {
    padding: 1.5rem;
  }
}
</style> 